Step 1 of 3: Creating an Application with a C1ListBox Control

In this step, you'll create a WinRT application in Visual Studio using ListBox for WinRT.

Complete the following steps:

In Visual Studio, select File | New | Project.

In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

Right-click the project name in the Solution Explorer and select Add Reference.

In the Reference Manager dialog box, select WinRT Edition and click OK to close the dialog box and add the reference.

Open MainPage.xaml if it isn't already open, and add the following markup within the <Page> tag:

Markup	Copy Code
xmlns:c1="using:C1.Xaml" xmlns:c1tile="using:C1.Xaml.Tile"

This adds references to the C1.Xaml and C1.Xaml.Tile assemblies to the project.

Place the cursor between the <Grid> and </Grid> tags, and click once.

Add the following <StackPanel> markup between the <Grid> and </Grid> tags to add a StackPanel containing a TextBlock and ProgressBar:

Markup	Copy Code
<StackPanel x:Name="loading" VerticalAlignment="Center"> <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/> <ProgressBar IsIndeterminate="True" Width="200" Height="4"/> </StackPanel>

Markup

Copy Code

<StackPanel x:Name="loading" VerticalAlignment="Center">
    <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/>
    <ProgressBar IsIndeterminate="True" Width="200" Height="4"/>
</StackPanel>

The TextBlock and ProgressBar will indicate that the C1ListBox is loading.

Navigate to the Toolbox and double-click the C1ListBox icon to add the control to the grid. This will add the reference and XAML namespace automatically.

Edit the <Xaml:C1ListBox> tag to customize the control:

Markup	Copy Code
<Xaml:C1ListBox x:Name="listBox" ItemsSource="{Binding}" Background="Transparent" Visibility="Collapsed" ItemWidth="800" ItemHeight="600" RefreshWhileScrolling="False"></Xaml:C1ListBox>

This gives the control a name and customizes the binding, background, visibility, size, and refreshing ability of the control.

Add the following markup between the <Xaml:C1ListBox> and </Xaml:C1ListBox> tags:

Markup	Copy Code
<Xaml:C1ListBox.PreviewItemTemplate> <DataTemplate> <Grid Background="Gray"> <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/> </Grid> </DataTemplate> </Xaml:C1ListBox.PreviewItemTemplate> <Xaml:C1ListBox.ItemTemplate> <DataTemplate> <Grid> <Image Source="{Binding Content}" Stretch="UniformToFill"/> <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/> </Grid> </DataTemplate> </Xaml:C1ListBox.ItemTemplate>

Markup

Copy Code

<Xaml:C1ListBox.PreviewItemTemplate>
     <DataTemplate>
          <Grid Background="Gray">
               <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
          </Grid>
     </DataTemplate>
</Xaml:C1ListBox.PreviewItemTemplate>
<Xaml:C1ListBox.ItemTemplate>
     <DataTemplate>
          <Grid>
               <Image Source="{Binding Content}" Stretch="UniformToFill"/>
               <TextBlock Text="{Binding Title}" Foreground="White" Margin="4 0 0 4" VerticalAlignment="Bottom"/>
          </Grid>
     </DataTemplate>
</Xaml:C1ListBox.ItemTemplate>

This markup adds data templates for the C1ListBox control's content. Note that you'll complete binding the control in code.

What You've Accomplished

You've successfully created a WinRT style application containing a C1ListBox control. In the next step, Step 2 of 3: Adding Data to the ListBox, you will add the data for C1ListBox.